<!DOCTYPE HTML>
<html>
<head>
<title>jsrsasign: JWK Thumprint calculator</title>
<!-- Custom Theme files -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<meta name="keywords" content="Flatastic Mega Mobile UI Kit App Responsive web template, Bootstrap Web Templates, Flat Web Templates, AndriodCompatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola webdesign" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="../jsrsasign-latest-all-min.js"></script>
<script src="../jws-3.3.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/Chart.js"></script> 
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<!---tage-script---->
<!-- start price_bar  -->	
<link href="css/jquery.nouislider.css" rel="stylesheet">
<script src="js/jquery.nouislider.js"></script>
<link rel="stylesheet" type="text/css" href="css/fd-slider.css">
<script type="text/javascript" src="js/fd-slider.js"></script>
<script>
$(document).ready(function(){
//-------row1-----//
  $(".tag1").click(function(){
    $(".tag1").hide();
  });
  $(".toogle2").click(function(){
    $(".toogle2").hide();
  });
  $(".tag2").click(function(){
    $(".tag2").hide();
  });
 //-------//row1-----//
});

//var hash = KJUR.crypto.Util.hashHex(hex, "sha256");
//var hashB64U = hextob64u(hash);

// set sample callback
$(document).ready(function(){
  $("#b_sample_rsa").click(function() { $('#input1').val(sJWKRSA1); });
});

$(document).ready(function(){
  $("#b_sample_ec").click(function() { $('#input1').val(sJWKEC1); });
});

$(document).ready(function(){
  $("#b_sample_oct").click(function() { $('#input1').val(sJWKOCT1); });
});

// toHex callback
$(document).ready(function(){
  $("#b1").click(function() {
    var sInput = $('#input1').val();
    var obj = KJUR.jws.JWS.readSafeJSONString(sInput);
    var tp = KJUR.jws.JWS.getJWKthumbprint(obj);
    $('#output1').val(tp);
  });
});

// toStr callback
$(document).ready(function(){
  $("#b2").click(function() {
    var sInput = $('#input1').val();
    var sOutput = hextorstr(intarystrtohex(sInput));
    $('#output1').val(sOutput);
  });
});

$(document).ready(function() {
  $('#input1').val(sJWKRSA1);
});

// JWK RSA public key from RFC 7638 3.1 example
var sJWKRSA1 = (function() {/*
{ "kty": "RSA",
  "n": "0vx7agoebGcQSuuPiLJXZptN9nndrQmbXEps2aiAFbWhM78LhWx4cbbfAAtVT86zwu1RK7aPFFxuhDR1L6tSoc_BJECPebWKRXjBZCiFV4n3oknjhMstn64tZ_2W-5JsGY4Hc5n9yBXArwl93lqt7_RN5w6Cf0h4QyQ5v-65YGjQR0_FDW2QvzqY368QQMicAtaSqzs8KJZgnYb9c7d0zgdAZHzu6qMQvRL5hajrn1n91CbOpbISD08qNLyrdkt-bFTWhAI4vMQFh6WeZu0fM4lFd2NcRwr3XPksINHaQ-G_xBniIqbw0Ls1jF44-csFCur-kEgU8awapJzKnqDKgw",
  "e": "AQAB",
  "alg": "RS256",
  "kid": "2011-04-29" }
*/}).toString().match(/\/\*([^]*)\*\//)[1];

// JWK ECC public key from RFC 7517 8.1 example
var sJWKEC1 = (function() {/*
{ "kty":"EC",
  "crv":"P-256",
  "x":"MKBCTNIcKUSDii11ySs3526iDZ8AiTo7Tu6KPAqv7D4",
  "y":"4Etl6SRW2YiLUrN5vfvVHuhp7x8PxltmWWlbbM4IFyM",
  "use":"enc",
  "kid":"1" }
*/}).toString().match(/\/\*([^]*)\*\//)[1];

// JWK OCT(symmetric) key from RFC 7517 8.1 A.3 example
var sJWKOCT1 = (function() {/*
{ "kty":"oct",
  "k":"AyM1SysPpbyDfgZld3umj1qzKObwVMkoqQ-EstJQLr_T-1qS0gZH75aKtMN3Yj0iPS4hcgUuTwjAzZr1Z9CAow",
  "kid":"HMAC key used in JWS spec Appendix A.1 example" }
*/}).toString().match(/\/\*([^]*)\*\//)[1];

</script>

<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('#horizontalTab').easyResponsiveTabs({
    type: 'default', //Types: default, vertical, accordion           
    width: 'auto', //auto or any width like 600px
    fit: true   // 100% fit in a container
  });
});
</script>	

<!----Calender -------->
<link rel="stylesheet" href="css/clndr.css" type="text/css" />
<script src="js/underscore-min.js" type="text/javascript"></script>
<script src= "js/moment-2.2.1.js" type="text/javascript"></script>
<script src="js/clndr.js" type="text/javascript"></script>
<script src="js/site.js" type="text/javascript"></script>
<!----End Calender -------->
</head>
<body>
<div class="wrap">

<!-- Menu-2 -->
<div class="menu_2">
<a href="index.html"><span class="menu_2_left"></span></a>
<h2>JWK Thumprint Calculator</h2>
<span class="menu_2_right">
 <ul class="menu_2_right_nav">
  <li><a href="#">Profile</a></li>
  <li><a href="#">Login</a></li>
  <li class="last_menu"><a href="#">Logout</a></li>
 </ul>
</span>
<div class="clear"></div>
</div>

<div class="big-buttons-col2">
Set sample JWK key:
<ul>
<li><input class="blue green green1" type="button" value="RSA" id="b_sample_rsa"/></li>
<li><input class="blue green green1" type="button" value="EC" id="b_sample_ec"/></li>
<li><input class="blue green green1" type="button" value="Symmetric Key" id="b_sample_oct"/></li>
</ul>
</div>

<div class="form-group">
<textarea class="form-control" rows="10" cols="100" id="input1"></textarea>
</div>

<div class="big-buttons-col2">
<ul>
<li><input class="blue blue1" type="button" value="Calculate Thumbprint" id="b1"/></li>
</ul>
</div>

<div class="form-group">
<textarea class="form-control" rows="10" cols="100" id="output1"></textarea>
</div>

<div>
This tool calculates JWK thumbprint from JWK(JSON Web Key) which defined in 
<a href="https://tools.ietf.org/html/rfc7638" target="_blank">RFC 7638</a>.
</div>

<!-- *** FOOTER *************************************** -->
<div class="copy">
<p>
&copy; 2015 Kenji Urushima <a href="https://twitter.com/kjur">@kjur</a>
All rights reserved |
Template by <a href="http://w3layouts.com" target="_blank">w3layouts</a> |
Powered by <a href="https://kjur.github.io/jsrsasign">jsrsasign</a>
</p>
</div>
<!--- start circle --->
<script src="js/jquery.circliful.min.js"></script>
<script>
$( document ).ready(function() {
  $('#myStat2').circliful();
});
</script>
<link href="css/flexslider.css" rel='stylesheet' type='text/css' />
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
  SyntaxHighlighter.all();
});
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    start: function(slider){
      $('body').removeClass('loading');
    }
  });
});
</script>
</body>
</html>
